<template>
    <div class="grable-layout" id="grable-layout">
        <!-- 面板展示载体 -->
        <div class="all-content show-all fix-scrollbar" style="overflow:hidden" >
            <div class="layout-content show-content"  :style="{width: layoutConfig.maxLeft+'px',height:layoutConfig.maxTop+'px'}">
                <div class="showitem item" v-for="(item,index) in myArray" :key="index" :index="index" v-if="item.tagIndex == panelDisplayIndex"
                    :style="{'left':item.x,'top':item.y,'width':item.w,'height':item.h ,'z-index':item.index}">
                    <slot :name="item.item.graphId"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import util from 'util'
export default {
    name:"panel-layout",
    props:{
        layoutList:{
            type:Array,
            default:function () {
                return [
                    {x:4,y:3,col:1,row:1}
                ]
            }
        },
        config:{
            type:Object,
            default:function () {
                return {}
            }
        },
        mergeList:{
            type:Array,
            default:function () {
                return []
            }
        },
        defultObj:{
            type:Object,
            default:function () {
                return {}
            }
        },
        // panelDisplayList:{
        //     type:Array,
        //     default:function(){
        //         return []
        //     }
        // },
        panelDisplayIndex:{
            type:String,
            default:function(){
                return ''
            }
        }

    },
    data () {
        return {
            //面板设置相关
            layoutConfig:{
                maxLeft:'',//页面  编辑的时候  实际宽度限制
                maxTop:'',
                left:1440,//固定宽高的时候的宽度高度
                top:900,
                rulewidth:0,
                ruleHeight:0,
                scale:'1'// 页面 缩放方式   1 缩放 2   固定宽高
            },
            myArray:[],
        }
    },
    watch:{
        graphName(val) {
            this.$refs.graphTree.filter(val);
        },
        layoutConfig:  {
            handler(newValue, oldValue) {
                var val =util.util.cloneObj(newValue);
                //-2是因为边距的问题
                val.maxTop=val.maxTop-2;
                val.maxLeft=val.maxLeft-2;
    　　　　},
    　　　　deep: true
    　　},
    },
    methods:{

        init(){
            var _this  =this;
            var array =util.util.cloneObj(this.layoutList);
            if(this.config.scale || this.config.scale == '1'){
                this.config.maxLeft =document.getElementById('grable-layout').offsetWidth;
                this.config.maxTop = window.screen.height - 32;
            }
            this.myArray =array;
            util.util.extendObj(this.layoutConfig,util.util.cloneObj(this.config))
            util.util.extendObj(this,util.util.cloneObj(this.defultObj));
            var zindex =0;
            for(var i=0;i<array.length;i++){
                zindex=array[i].index>zindex?array[i].index:zindex;
            }
        },
    },
    mounted(){
        this.init();
    },

}
</script>
